<template>
  <div class="restaurant-detail">
    <el-container>
<!--      <el-header>-->
<!--        <el-breadcrumb separator="/">-->
<!--          <el-breadcrumb-item>首页</el-breadcrumb-item>-->
<!--          <el-breadcrumb-item>餐厅详情</el-breadcrumb-item>-->
<!--        </el-breadcrumb>-->
<!--      </el-header>-->
      <el-main>
        <div class="restaurant-info">
          <el-row :gutter="20">
            <el-col :span="8" v-for="(image, index) in restaurant.images" :key="index">
              <img :src="image" class="restaurant-image" alt="餐厅图片" />
            </el-col>
          </el-row>
          <h1 class="restaurant-name">{{ restaurant.name }}</h1>
          <p class="restaurant-rating">评分: {{ restaurant.rating }}</p>
          <p class="restaurant-description">{{ restaurant.description }}</p>
        </div>
      </el-main>
    </el-container>
  </div>
  <div class="dishes-list">
    <h2>菜品列表</h2>
    <el-row :gutter="20">
      <el-col :span="8" v-for="dish in restaurant.dishes" :key="dish.id">
        <el-card class="dish-card">
          <img :src="dish.image" class="dish-image" alt="菜品图片" />
          <div class="dish-info">
            <h3 class="dish-name">{{ dish.name }}</h3>
            <p class="dish-price">￥{{ dish.price }}</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
  <div class="reviews">
    <h2>用户评价</h2>
    <el-row>
      <el-col v-for="review in restaurant.reviews" :key="review.id" :span="24">
        <el-card class="review-card">
          <p class="review-content">{{ review.content }}</p>
          <p class="review-author">—— {{ review.author }}</p>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  props: {
    id: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      restaurant: {
        id: 1,
        name: '小野日禾·料理小屋',
        rating: 4.8,
        description: '镜湖区镜湖路1号',
        images: [
          'src/static/小野日禾.jpg',
          'src/static/小野日禾2.jpg',
          'src/static/小野日禾3.jpg'
        ],
        dishes: [
          {
            id: 1,
            name: '大阪玉子烧',
            price: 28,
            image: 'src/static/大阪玉子烧.jpg'
          },
          {
            id: 2,
            name: '小龙虾石锅拌饭',
            price: 38,
            image: 'src/static/小龙虾石锅拌饭.jpg'
          },
          {
            id: 3,
            name: '日式炸猪排',
            price: 38,
            image: 'src/static/日式炸猪排.jpg'
          },
        ],
        reviews: [
          {
            id: 1,
            content: '食物美味，服务周到，下次还会再来。',
            author: '用户A'
          },
          {
            id: 2,
            content: '环境优雅，菜品精致，值得推荐。',
            author: '用户B'
          }
        ]
      }
    };
  },
  created() {
    this.fetchRestaurantDetails();
  },
  methods: {
    fetchRestaurantDetails() {
      // 确保这里正确获取餐厅详情数据
      console.log("Fetching restaurant details...");
      // 模拟异步请求
      setTimeout(() => {
        this.restaurant = {
          id: 1,
          name: '小野日禾·料理小屋',
          rating: 4.8,
          description: '镜湖区镜湖路1号',
          images: [
            'src/static/小野日禾.jpg',
            'src/static/小野日禾2.jpg',
            'src/static/小野日禾3.jpg'
          ],
          dishes: [
            {
              id: 1,
              name: '大阪玉子烧',
              price: 28,
              image: 'src/static/大阪玉子烧.jpg'
            },
            {
              id: 2,
              name: '小龙虾石锅拌饭',
              price: 38,
              image: 'src/static/小龙虾石锅拌饭.jpg'
            },
            {
              id: 3,
              name: '日式炸猪排',
              price: 38,
              image: 'src/static/日式炸猪排.jpg'
            },
          ],
          reviews: [
            {
              id: 1,
              content: '食物美味，服务周到，下次还会再来。',
              author: '用户A'
            },
            {
              id: 2,
              content: '环境优雅，菜品精致，值得推荐。',
              author: '用户B'
            }
          ]
        };
      }, 1000);
    }
  }
};
</script>
<style scoped>
.restaurant-detail {
  padding: 10px;
  background-color: #f0faff;
}

.restaurant-info {
  text-align: center;

}

.restaurant-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.restaurant-name {
  font-size: 24px;
  margin: 10px;
}

.restaurant-rating {
  font-size: 18px;
  color: #FFD700;
}

.restaurant-description {
  font-size: 14px;
  color: #666;
}

.dishes-list {
  margin-top: 3px;
}

.dish-card {
  text-align: center;
}

.dish-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.dish-name {
  font-size: 16px;
  margin: 10px 0;
}

.dish-price {
  font-size: 14px;
  color: #FF4949;
}

.reviews {
  margin-top: 20px;
}

.review-card {
  margin-bottom: 10px;
}

.review-content {
  font-size: 14px;
  color: #333;
}

.review-author {
  font-size: 12px;
  color: #999;
}
</style>